<script setup lang="ts">
import { XPlugin } from "x.host";
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
let props = defineProps<{
    plugin: XPlugin
}>();
</script>

<template>
<div class="x-help">
    <div class="help-box">
        <div class="info-box">
            新增插件说明：
            <div style="font-size:small;padding:10px">
                1.复制 x-help 项目到同一目录并重名 <br/>
                2.修改新项目的 package.json 的 name 与目录同名 <br/>
                3.修改新项目的 src/x.help.ts 与目录同名 <br/>
                4.编译新项目 <br/>
                5.在 public/plugins.json 中仿照 x.help 添加新的插件加载路径 <br/>
            </div>
        </div>
        <div class="info-box">
            插件生命周期：
            <div style="font-size:small;padding:10px">
                1. new: 定义完插件后需要先实例化自己，如 x.help.ts 中的 new XHelp() <br/>
                2. plugin-add: 插件的父类 XPlugin 会将自己注册到全局变量 x.registry ( XPluginRegistry ) 中, x.registry 会触发自身的 plugin-add 事件 <br/>
                3. onInstall: XPluginHost 在监听到 x.registry 的 plugin-add 后, 会调用插件的 setHost 将自己设置给插件，并调用插件的 onInstall <br/>
                4. plugin-add: XPluginHost 在添加插件后会触发自身的 plugin-add 事件 <br/>
                5. host-init: XPluginHost 获得dom元素后会触发 host-init 事件 <br/>
                6. onHostInit: 插件在收到 host-init 事件后会调用自身的 onHostInit <br/>
                7. plugin-remove: XPluginHost 在移除插件后会触发自身的 plugin-remove 事件 <br/>
                8. onUninstall: XPluginHost 移除插件后会调用插件的 onUninstall <br/>
            </div>
        </div>
    </div>
</div>
</template>

<style>
.help-box {
    display: inline-block;
    vertical-align: top;
}
.info-box {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    vertical-align: top;
    border-radius: 5px;
    background: #fff;
    color: #666;
    padding: 10px;
    width: 500px;
}
</style>
